<template>
	<view class="setting">
		<m-container :status="onLine ? status : 6" :reloadFunc="reloadFunc">
			<view class="setting-self">
				<view class="info">
					<image :src="userInfo.avatarUrl"></image>
					<view>
						<text>{{ userInfo.nickName }}</text>
						<text>{{ userInfo.gender === 1 ? '男' : '女' }}</text>
					</view>
				</view>
				<view>></view>
			</view>
			<view class="nav-list">
				<view class="nav-item">
					<text>手机号</text>
					<text>111111231321</text>
				</view>
				<view class="nav-item">
					<text>当前版本</text>
					<text>v1.0.0</text>
				</view>
				<view class="nav-item">
					<text>关于我们</text>
					<text>></text>
				</view>
			</view>
			<view class="logout" @tap="logOut">退出</view>
		</m-container>
	</view>
</template>

<script>
const utils = require('../../../utils/utils'),
	globalData = getApp().globalData;
import { mapState } from 'vuex';
export default {
	data() {
		return {
			status: 2,
			userInfo: {}
		};
	},
	computed: {
		...mapState(['onLine'])
	},
	async onLoad() {
		try {
			this.userInfo = await utils.storage.get('userInfo');
		} catch (e) {
			//TODO handle the exception
		}
		this.reloadFunc();
	},
	methods: {
		reloadFunc() {},
		async logOut() {
			await utils.storage.remove('userInfo');
			globalData.isLogin = false;
			uni.reLaunch({
				url: '/pages/my/my'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.setting {
	height: 100vh;
	background: #f6f6f6;
}
.setting-self {
	height: 140rpx;
	width: 100%;
	background: #ffffff;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 20rpx;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.info {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.info > image {
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.info > view {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10rpx 0rpx;
}
.nav-list {
	margin-top: 40rpx;
	background: #ffffff;
}
.nav-list .nav-item {
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}
.nav-list .nav-item:not(:last-child) {
	border-bottom: 1rpx solid #eeeeee;
}
.nav-list .nav-item > text:last-child {
	color: #cccccc;
}
.logout {
	height: 100rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ffffff;
	margin-top: 40rpx;
}
</style>
